<template>
  <basic-dialog
    :width="'384px'"
    :visible="visible"
    :title="'设置显示字段'"
    :show-footer="false"
    :handle-close="onCancel"
    :handle-open="getTableColumns"
  >
    <div class="search_field">
      <el-input class="input_field" v-model="filterVal"></el-input>
      <el-button @click="tableListFilterFn">查找</el-button>
      <div class="right_btn">
        <el-button type="primary" @click="updateTableColumns"
          >完成配置</el-button
        >
      </div>
    </div>
    <table class="itxst table-header">
      <tr>
        <th class="lie01">显示</th>
        <th class="lie02">名称</th>
        <th class="lie03">列宽</th>
        <th class="lie04">操作</th>
        <th class="lie00"></th>
      </tr>
    </table>
    <div class="table-box" :style="boxHeight">
      <table class="itxst table-body">
        <!--使用draggable组件-->
        <draggable
          v-model="allColumnSettingsList"
          animation="500"
          force-fallback="true"
          handle=".move"
        >
          <tr
            v-for="(item, index) in allColumnSettingsList"
            :key="item.id"
            :id="item.prop"
          >
            <td class="move lie01">
              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="item.isShow"
                :width="switchWidth"
                :disabled="!item.isCancelShow"
              >
              </el-switch>
            </td>
            <td class="move lie02">{{ item.label }}</td>
            <td class="move lie03">
              <el-input v-model="item.width"></el-input>
            </td>
            <td class="move lie04">
              <span
                class="btn"
                v-if="index != 0"
                @click="toppingFn(allColumnSettingsList, index)"
                >置顶</span
              >
              <span
                class="btn"
                v-if="index != allColumnSettingsList.length - 1"
                @click="bottomSettingFn(allColumnSettingsList, index)"
                >置底</span
              >
            </td>
          </tr>
        </draggable>
      </table>
    </div>
  </basic-dialog>
</template>
<script>
import BasicDialog from '../../components/BasicDialog';
import draggable from 'vuedraggable';
import {
  getTableColumnsService,
  updateTableColumnsService
} from '@/api/sourcing/public';

export default {
  components: {
    draggable,
    BasicDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      drag: false,
      filterVal: '',
      boxHeight: 'height: ' + (document.body.clientHeight * 6) / 10 + 'px;',
      switchWidth: 28,
      // 定义要被拖拽对象的数组
      allColumnSettingsList: []
    };
  },
  methods: {
    async getTableColumns () {
      const parmas = {
        menuId: sessionStorage.getItem('menuId'),
      }
      const res = await getTableColumnsService(parmas)
      if (res) {
        this.allColumnSettingsList = res.data;
      }
    },
    // 完成配置
    async updateTableColumns () {
      this.allColumnSettingsList.map((item, index) => {
        item.ord = index + 1;
        return item;
      });
      const data = {
        menuId: sessionStorage.getItem('menuId'),
        columnSettings: this.allColumnSettingsList
      };
      const res = await updateTableColumnsService(data)
      if (res) {
        this.$message.success(res.msg);
        this.onCancel();
        this.$emit('ok-handler')
      }
    },

    /* 置顶 */
    toppingFn (arr, index) {
      arr.unshift(arr.splice(index, 1)[0]);
    },
    /* 置底 */
    bottomSettingFn (arr, index) {
      arr.push(arr.splice(index, 1)[0]);
    },
    onCancel () {
      this.$emit('update:visible', false);
    },
    /* 查找 */
    tableListFilterFn () {
      const tempList = this.allColumnSettingsList.filter(
        (data) =>
          !this.filterVal ||
          data.label.toLowerCase() == this.filterVal.toLowerCase()
      );
      if (tempList.length !== 0) {
        window.location.href = '#' + tempList[0].prop;
      }
    },
  }
};
</script>
<style scoped>
/*定义要拖拽元素的样式*/
table.itxst {
  color: #333333;
  border-collapse: collapse;
  font-size: 12px;
  text-align: center;
}
table.itxst th {
  height: 32px;
  line-height: 32px;
  background: #ebebf0;
  color: #999;
  font-weight: normal;
}
table.itxst td {
  padding-top: 10px;
}
table.itxst tr {
  cursor: pointer;
}
table.itxst td.move:hover {
  cursor: move;
}
>>> .el-dialog__body {
  padding: 0;
}
>>> .el-switch {
  height: 16px;
  line-height: 16px;
}
>>> .el-switch__core {
  height: 14px;
  border-radius: 14px;
}
>>> .el-switch__core:after {
  width: 12px;
  height: 12px;
  top: 0;
}
>>> .el-switch.is-checked .el-switch__core::after {
  margin-left: -12px;
}
.itxst .lie01 {
  width: 70px;
}
.itxst .lie02 {
  width: 134px;
  text-align: left;
}
.itxst .lie03 {
  width: 90px;
}
.itxst .lie04 {
  width: 90px;
}
.table-header .lie00 {
  width: 16px;
}
.itxst .lie04 span {
  margin: 0 5px;
  color: #3d7fff;
}
>>> .lie03 .el-input--small .el-input__inner {
  width: 54px;
  height: 24px;
  padding: 0 5px;
  border-radius: 14px;
  text-align: center;
}
.search_field {
  border-top: 1px solid #dee1e6;
  padding: 13px 0 10px;
}
.input_field {
  width: 170px;
  margin: 0 15px 0 20px;
}
.search_field .right_btn {
  float: right;
  border-left: 1px solid #dfe1e6;
  padding: 0 12px;
}
.table-box {
  overflow-y: scroll;
}
.table-header {
  width: 384px;
}
.btn {
  cursor: pointer;
}
</style>
